<template>
	<view class="i-goods-recommend" :style="[viewStyle]">
		<view class="recommend-title e-flex-xy-center " v-if="option.recommendTitleShow">
			<view class="e-font-40 fw-600 e-rela" :style="[recommendTitleStyle]">{{option.recommendTitleText}}</view>
		</view>
		<layout-goods-list :storeId="storeId" :option="option" ></layout-goods-list>
		
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue'
	import layoutGoodsList from './child/goods-list.vue'
	import type { GoodsItem } from '@/common/request/api'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'

	const props = withDefaults(defineProps<{
		storeId ?: string
		option : {
			// 商品列表
			goodsList: GoodsItem[],
			// 布局
			layoutType : 1 | 2 | 3 | 4 | 5 | 6 | 7
			//是否显示商品标题
			titleShow : boolean
			//商品标题文本颜色
			titleColor : string
			//是否显示商品价格
			priceShow : boolean
			//商品价格文本颜色
			priceColor : string
			//是否显示划线原价
			scribeShow : boolean
			//划线原价文本颜色
			scribeColor : string
			//是否显示商品销量
			salesShow : boolean
			//商品销量文本颜色
			salesColor : string
			//是否显示购物车按钮
			buttonShow : boolean
			//购物车按钮样式类型，详见设计稿
			buttonType : 1 | 2 | 3 | 4
			//购物车按钮文本 仅buttonType为1生效
			buttonText : string
			//购物车按钮文本颜色 仅buttonType为1生效
			buttonTextColor : string
			//购物车按钮圆角 仅buttonType为1生效
			buttonRadius : number
			//购物车按钮背景颜色 仅buttonType为1生效
			buttonBackgroundColor : string
			//图标颜色 仅buttonType为2生效
			addIconColor : string
			//图标背景颜色是否为自定义 仅buttonType为2生效
			addIconBackgroundType : boolean
			//自定义图标背景颜色 仅buttonType为2与addIconBackgroundType为true时生效
			addIconBackgroundColor : string
			//图标颜色 仅buttonType为3生效
			carIconColor : string,
			//图标颜色 仅buttonType为4生效
			circularCarIconColor : string
			//图标背景颜色是否为自定义 仅buttonType为4生效
			circularCarIconBackgroundType : boolean
			//自定义图标背景颜色 仅buttonType为4与circularCarIconBackgroundType为true时生效
			circularCarIconBackgroundColor : string
			//样式风格
			styleType : 0 | 1 | 2
			//jump跳转商品详情 add加入购物车
			buttonEvent : 'jump' | 'add'
			//底色背景
			backgroundColor: string
			//商品背景
			goodsBackgroundColor: string
			// 商品边距
			goodsMargin : number
			// 边距
			paddingTop : number
			paddingBottom : number
			paddingX : number
			// 商品圆角
			goodsRadiusTop : number
			goodsRadiusBottom : number
			//活动角标 0不显示 1系统图标 2自定义
			signType : 0|1|2
			//活动角标文本
			signText : string
			// 对应活动角标，详见设计稿
			signIconName : 0|1|2
			//自定义活动角标图片地址
			signIconUrl : string
			// 商品说明文本
			explainText: string,
			// 商品说明文本颜色
			explainTextColor: string
			// 商品说明背景颜色
			explainBackgroundColor: string
			//是否显示商品说明
			explainShow:boolean
			//是否显示标题
			recommendTitleShow: boolean
			//标题文本
			recommendTitleText: string
			//标题文本颜色
			recommendTitleTextColor: string
			//标题线条颜色
			recommendTitleLineColor: string

		}
	}>(), {
		option: () => ({
			goodsList: [],
			layoutType: 4,
			explainShow: true,
			titleShow: true,
			titleColor: 'rgba(48,49,51,1)',
			priceShow: true,
			priceColor: 'rgba(245,34,45,1)',
			scribeShow: true,
			scribeColor: 'rgba(192,196,204,1)',
			salesShow: true,
			salesColor: 'rgba(192,196,204,1)',
			buttonShow: true,
			buttonType: 1,
			buttonText: '',
			buttonTextColor: 'rgba(255, 255, 255, 1)',
			buttonBackgroundColor: 'rgba(245,34,45,1)',
			addIconColor: 'rgba(255, 255, 255, 1)',
			addIconBackgroundType: true,
			addIconBackgroundColor: 'rgba(245,34,45,1)',
			carIconColor: 'rgba(245,34,45,1)',
			circularCarIconColor: 'rgba(255, 255, 255, 1)',
			circularCarIconBackgroundType: true,
			circularCarIconBackgroundColor: 'rgba(245,34,45,1)',
			buttonRadius: 4,
			buttonEvent: 'jump',
			styleType: 0,
			backgroundColor: '',
			goodsBackgroundColor: 'rgba(255, 255, 255, 1)',
			goodsMargin: 7,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 10,
			goodsRadiusTop: 0,
			goodsRadiusBottom: 0,
			signType: 0,
			signText: '',
			signIconName: 0,
			signIconUrl: '',
			explainText: '',
			explainTextColor: 'rgba(245,34,45,1)',
			explainBackgroundColor: 'rgba(254, 233, 234, 1)',
			recommendTitleShow: true,
			recommendTitleText: '',
			recommendTitleTextColor: 'rgba(48, 49, 51, 1)',
			recommendTitleLineColor: 'rgba(245,34,45,1)',
		})
	})
	
	const ctx = useCurrentInstance()
	const { viewStyle } = useLayoutCompoments(ctx, props.option)

	const recommendTitleStyle = computed(() => {
		return {
			color:props.option.recommendTitleTextColor,
			'--color':props.option.recommendTitleLineColor
		}
	})



</script>

<style scoped lang="scss">
.recommend-title{
	padding: 30rpx 0;
	view{
		padding: 0 92rpx;
		&::after,
		&::before{
			content: '';
			position: absolute;
			width: 84rpx;
			height: 2rpx;
			background-color: var(--color);
			top: 50%;
			
		}
		&::after{
			left: 0;
		}
		&::before{
			right: 0;
		}
	}
}
// .explain{
// 	width: 100%;
// 	padding: 0 20rpx;
// 	line-height: 60rpx;
// 	overflow: hidden;
// 	text-overflow: ellipsis;
// 	white-space: nowrap;
// 	left: 0;
// 	bottom: 0;
// }
</style>
